<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// cookie是浏览器提供的一种机制，可以通过JS操作cookie
// cookie是一种会话跟踪技术，是存储在访问者计算机中的一小块数据
// cookie用于在浏览器中存储用户状态（浏览器状态、登录状态、个性设置等）

// cookie的一些特征：
// 1.需要在服务器环境运行
// 2.cookie按域名和浏览器存储
// 3.同一个网站的多个页面共享一套数据
// 4.cookie可以设置有效期，过期会自动删除
// 5.cookie会随着http请求自动发送到服务端
// 6.cookie存储空间只有4kb或50条左右
// 7.cookie兼容性较好，没有方便的API操作

// 设置cookie
let d = new Date();
d.setMinutes(d.getMinutes() + 30);
document.cookie = 'user1=xiaoming; domain=127.0.0.1; path=/0926/day32; expires='+d;

function setCookie(options){
    // 对options解构赋值
    let {key,val,exp='',path='',domain=''} = options;

    let d = '';
    // 判断是否设置有效期
    if (exp) {
        d = new Date();
        d.setMinutes(d.getMinutes() + exp);
    }
    // 设置cookie
    document.cookie = `${key}=${val}; domain=${domain}; path=${path}; expires=${d}`;
}
setCookie({// options
    key: 'user2',
    val: 'xiaohong',
    domain: '127.0.0.1',
    path: '/0926',
    exp: 60*24 // 单位为分钟
});
setCookie({// options
    key: 'user3',
    val: 'xiaozhang'
});


// 获取cookie
// console.log( document.cookie );// 'user1=xiaoming; user3=xiaozhang; user2=xiaohong'
// 需求: 获取user3的值
function getCookie(key){
    // 获取所有的cookie数据
    let str = document.cookie;
    // console.log( str );// 'user1=xiaoming; user3=xiaozhang; user2=xiaohong'
    // 将str分割成数组
    let arr = str.split('; ');
    // console.log( arr );// ['user1=xiaoming', 'user3=xiaozhang', 'user2=xiaohong']
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 分割每一个元素
        let arr2 = arr[i].split('=');
        // console.log( arr2 );// ['user1','xiaoming']
        // 判断arr2当前元素的第一个值是否等于key
        if (arr2[0] === key) {
            return arr2[1];
        }
    }
    return null;
}
console.log( getCookie('user1') );// 'xiaoming'
console.log( getCookie('user3') );// 'xiaozhang'
console.log( getCookie('user4') );// null
console.log( getCookie('domain') );// null


// 删除cookie
function rmCookie(key){
    // cookie过期会自动删除
    setCookie({
        key: key,
        val: '123',
        exp: -60 * 24
    });
}
rmCookie('user1');

</script>
</body>
</html>